<!-- qc图片列表、下载、分享 -->
<template>
	<div style="width: 100%;">
		<div class="qc-flex" :class="types">
			<div class="flex-left">
				<div v-for="(item, index) in arr" :key="index" class="left-item" @click="viewPicture(index)">
					<img class="item-img" :src="item" alt="" />
				</div>
			</div>
			<div>
				<img class="share-down" src="@/assets/images/user/down-icon1.png" alt="" @click="downAll" />
				<Tooltip placement="top">
					<img class="flex-share" src="@/assets/images/public/share_abe1.png" alt="" />
					<div slot="content">
						<div class="share-content">
							<div v-for="(item, index) in shareList" :key="index" class="content-item" @click="shareItem(item)">
								<img class="item-icon" :src="item.icon" alt="" />
								<div class="item-text">{{ item.title }}</div>
							</div>
						</div>
					</div>
				</Tooltip>
			</div>
		</div>
	</div>
</template>

<script>
import { toSeoFriendsChannel } from '@/common/common';
import { clickStatistics } from "@/api/order";
export default {
	data() {
		return {
			clickPicForm: {
				clientType: 1 //请求类型：1-PC;2-H5
			},
			clickShareForm: {
				clientType: 1 //请求类型：1-PC;2-H5
			},
			current: 0,
			qcList: [],
			shareList: [
				{
					title: 'Discord',
					icon: require('@/assets/images/public/qc-discord.png'),
					type: 'discord'
				},
				{
					title: 'Telegram',
					icon: require('@/assets/images/public/qc-telegram.png'),
					type: 'telegram',
					url: 'https://web.telegram.org/k/'
				},
				{
					title: 'Reddit',
					icon: require('@/assets/images/public/qc-reddit.png'),
					type: 'reddit',
					url: 'https://www.reddit.com/r/100buy/submit/'
				},
				{
					title: 'Pinterest',
					icon: require('@/assets/images/public/qc-pinterest.png'),
					type: 'pinterest',
					url: 'https://ca.pinterest.com/pin-creation-tool/'
				},
				{
					title: 'Instagram',
					icon: require('@/assets/images/public/qc-instagram.png'),
					type: 'instagram',
					url: 'https://www.instagram.com/'
				},
				{
					title: 'WhatsApp',
					icon: require('@/assets/images/public/qc-whatsApp.png'),
					type: 'whatsApp',
					url: 'https://web.whatsapp.com/'
				},
				{
					title: 'Copy link',
					icon: require('@/assets/images/public/qc-copy.png'),
					type: 'copy'
				}
			]
		}
	},
	props: {
		//qc-list订单列表 qc-detail-订单详情
		types: {
			type: String,
			default: 'qc-list'
		},
		//图片列表
		arr: {
			type: Array,
			default() {
				return []
			}
		},
		items: Object,
		inviteCode: String,//用户邀请码
	},
	watch: {
		items: {
			handler(n) {
				let list = [];
				if (n && n.checkPhotos && n.checkPhotos.length) {
					n.checkPhotos.forEach(item => {
						let url = '';
						let query = ''
						if (item.indexOf('libcdn1') != -1) {//替换前缀cdn
							url += item.replace('libcdn1.hahbuy.com', 'libcdn2.hahbuy.com/share')
						}
						//渠道码
						query += `${toSeoFriendsChannel(n.channel)}`;
						// spu
						query += `|${n.spuNo}`;
						//子单号
						query += `|${n.id}`;
						//重量
						query += `|${n.weight || ''}`;
						//推荐码
						query += `|${this.inviteCode || ''}`;
						//其他固定参数
						query += '|qcimage|share';
						url += `?query=${encodeURIComponent(query)}`;
						list.push(url);
					})
				}
				this.qcList = list;
			},
			immediate: true
		}
	},
	methods: {
		//下载
		downAll() {
			// 打点部分
			this.clickPicForm.orderItemId = this.items.id;//订单id
			this.clickPicForm.resourceType = 1;// 资源类型:1-图片;2-视频
			this.clickPicForm.sourceType = 2;// 来源：1-增值服务;2-普通QC
			this.clickPicForm.type = 2;// 类型：1-分享；2-下载
			clickStatistics(this.clickPicForm);
			// 逻辑部分
			this.qcList.forEach((item, index) => {
				setTimeout(() => {
					let name1 = item.split('?')[0];
					let name2 = name1.split('/');
					let name3 = name2[name2.length - 1];
					this.downImg(item, name3);
				}, (index + 1) * 800)
			})
		},
		downImg(modelUrl, imageName) {
			return new Promise(async (r) => {
				const response = await fetch(modelUrl);
				const blob = await response.blob();
				const link = document.createElement('a');
				link.href = URL.createObjectURL(blob);
				link.download = imageName; // 自定义下载的文件名
				link.click();
				r();
			})
		},
		// 查看图片
		viewPicture(index) {
			this.$viewerApi({
				images: this.qcList,
				options: {
					initialViewIndex: index,
				},
			});
		},
		//分享item
		shareItem(item) {
			// 打点部分
			this.clickShareForm.orderItemId = this.items.id;//订单id
			this.clickShareForm.resourceType = 1;// 资源类型:1-图片;2-视频
			this.clickShareForm.sourceType = 2;// 来源：1-增值服务;2-普通QC
			this.clickShareForm.type = 1;// 类型：1-分享；2-下载
			this.clickShareForm.shareChannel = item.type;//分享渠道
			clickStatistics(this.clickShareForm);
			// 下方是逻辑
			let _this = this;
			if (item.type == 'discord') {
				this.$emit('discordJump');
				return;
			}
			if (item.type == 'copy') {
				this.$copyText(this.qcList[0]).then(
					function () {
						_this.$Message.success(_this.$t("public.copySuccess"));
					},
					function () {
						_this.$Message.error(_this.$t("public.copyFail"));
					}
				);
				return;
			}
			if (item.url) {
				window.open(item.url);
				return;
			}
		}
	}
}
</script>

<style scoped lang="less">
.qc-list {
	.flex-left {
		.left-item {
			width: 48px;
			height: 48px;
			margin-right: 20px;
		}
	}
}

.qc-detail {
	.flex-left {
		.left-item {
			width: 80px;
			height: 80px;
			margin-right: 24px;
		}
	}
}

.qc-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.flex-left {
		flex: 1;
		margin-right: 24px;
		overflow-x: auto;
		white-space: nowrap;
		font-size: 0;

		.left-item {
			display: inline-block;
			font-size: 0;

			.item-img {
				width: 100%;
				height: 100%;
				border-radius: 4px;
			}
		}
	}

	.share-down {
		width: 28px;
		height: 28px;
		margin-right: 20px;
		cursor: pointer;
	}

	.flex-share {
		width: 24px;
		height: 24px;
	}

	.share-content {
		.content-item {
			display: flex;
			padding: 8px 0;
			align-items: center;
			cursor: pointer;
			font-size: 0;

			.item-icon {
				width: 14px;
				height: 14px;
				margin-right: 8px;
			}

			.item-text {
				color: #fff;
				font-size: 14px;
				line-height: 14px;
			}
		}
	}
}
</style>